<template>
  <div class="container">
    <!-- 城市信息 -->
    <p class="city-name" v-if="currentCity">{{ currentCity }}</p>
    <p class="city-name" v-else>加载中...</p>

    <div class="el-container">
      <!-- 搜索框 -->
      <el-input v-model="input" class="city-search" placeholder="搜索你所在的城市" :prefix-icon="Search" @keyup.enter="searchCity" />

      <!-- 画图选择 -->
      <el-select v-model="selectDraw" placeholder="选择绘制的图形" @change="drawMode">
        <el-option label="直线" value="LineString"></el-option>
        <el-option label="圆" value="Circle"></el-option>
        <el-option label="多边形" value="Polygon"></el-option>
        <el-option label="自由画笔" value="FreeHand"></el-option>
        <el-option label="清除绘图" value="Clear"></el-option>
      </el-select>

      <!-- 标记选择 -->
      <el-select v-model="selectMark" placeholder="选择标记类型" @change="markMode" :disabled="zoom < 13" @click="sendMsg">
        <el-option label="充电站" value="ChargeStation"></el-option>
        <el-option label="公交站" value="BusStation"></el-option>
        <el-option label="停车场" value="ParkingLot"></el-option>
        <el-option label="退出标记" value="ExitMark"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
// 引入pinia
import { useMapStore } from '@/stores/mapStore.js';
// 引入api
import { getCity, getAdcode } from '@/api/index.js';
// 饿了么弹窗
import { ElMessage } from 'element-plus';

const mapStore = useMapStore();
const currentCity = ref('');

const currentMode = ref('');

// 初始化该组件的城市信息和更新pinia的初始中心坐标、adcode
const init = async () => {
  const res = await getAdcode();
  const city = res.result.ad_info.city ? res.result.ad_info.city : res.result.ad_info.province;
  const cityRes = await getCity(city);
  currentCity.value = cityRes.result.title;
  mapStore.getCenter([cityRes.result.location.lng, cityRes.result.location.lat]);
  mapStore.getAdCode(cityRes.result.ad_info.adcode);
  mapStore.setDataReady(true);
};

init();

const input = ref('');
const selectDraw = ref('');
const selectMark = ref('');
const zoom = computed(() => {
  return mapStore.zoom;
});

const searchCity = () => {
  if (input.value.trim() === '') {
    alert('请输入城市名称');
    return;
  }
  getCity(input.value).then((res) => {
    // console.log(res);
    if (res.status === 0) {
      mapStore.getCenter([res.result.location.lng, res.result.location.lat]);
      mapStore.getAdCode(res.result.ad_info.adcode);
    } else if (res.status === 348) {
      alert('城市不存在');
      return;
    } else {
      alert('网络异常');
      return;
    }
  });
};

const drawMode = () => {
  //排他逻辑同markMode
  if (currentMode.value === 'draw') {
    mapStore.setDrawType(selectDraw.value);
    return;
  }

  if (selectMark.value) {
    selectMark.value = ''; //清除选项
    currentMode.value = 'draw'; //切换模式
    mapStore.setDrawType(selectDraw.value); //修改drawType
    mapStore.setMarkType(''); //初始化markType
  } else {
    currentMode.value = 'draw';
    mapStore.setDrawType(selectDraw.value);
  }
};

const markMode = () => {
  //切换mark模式后续点击只执行更新markType
  if (currentMode.value === 'mark') {
    mapStore.setMarkType(selectMark.value);
    return;
  }

  //第一次选择 draw有选项的情况
  if (selectDraw.value) {
    selectDraw.value = ''; //清除选项
    currentMode.value = 'mark'; //切换模式
    mapStore.setMarkType(selectMark.value); //修改markType
    mapStore.setDrawType('Point'); //初始化drawType
  }
  //第一次选择 draw无选项的情况 只需要切换模式和修改markType
  else {
    currentMode.value = 'mark';
    mapStore.setMarkType(selectMark.value);
  }
};

// 发送消息
function sendMsg() {
  if (zoom.value < 13) {
    ElMessage({
      message: '请先缩放地图到13级以上',
      type: 'warning',
    });
  }
}

//监听zoom变化
watch(zoom, (newZoom) => {
  if (newZoom < 13 && currentMode.value === 'mark') {
    currentMode.value = '';
    selectMark.value = '';
    mapStore.setMarkType('');
  }
});
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 20px;

  height: 60px;
  background-color: royalblue;
}
.city-name {
  font-weight: bold;
  color: white;
}
.city-search {
  width: 300px;
}

.el-select {
  width: 200px;
}

.el-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 50px;
}
</style>
